<template>
  <el-card style="box-shadow: none;margin-top: 20px" >
    <div class="container" >
      <div class="row row--top-20">
        <!--表單-->
        <div class="col-md-12">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--1.优惠券核销-->
            <el-tab-pane label="优惠券核销" name="1">
              <div class="row row--top-40" style="display: flex; justify-content: center;">
                <div class="col-md-12" style="display: flex; align-items: center; justify-content: center;">
                  <h2 class="coupons__title">优惠券核销</h2>
                </div>
              </div>
              <div class="card" style="margin-top: 10px">
                <div class="form-container">
                  <el-form ref="form" :model="verifyForm" label-width="90px" class="form-content">
                    <el-form-item label="优惠券编号:" class="input-item" style="width: 400px;margin-top: 20px">
                      <el-input v-model="verifyForm.couponsNumber"></el-input>
                    </el-form-item>
                    <el-form-item class="button-item" style="text-align: center;">
                      <el-button type="primary" @click="redeemCoupon" style="width: 120px">核销</el-button>
                      <el-button @click="resetForm" style="width: 120px">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <el-divider>可核销优惠券</el-divider>
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="couponsList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @header-contextmenu="cellClick">
                  <el-table-column fixed prop="id" align="center" width="50px"/>
                  <el-table-column label="学生ID" prop="studentId" align="center"/>
                  <el-table-column label="优惠券ID" prop="couponsId" align="center"/>
                  <el-table-column label="优惠券编号" prop="couponsNumber" align="center"/>
                  <el-table-column label="获取时间" prop="acquireDate" align="center"/>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex"
                        v-model:page-size="pageSize"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage"
                        @size-change="sizeChangeHandle"
                        @current-change="CurrentChangeHandle"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--2.核销记录表單-->
            <el-tab-pane label="核销记录" name="2">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="redeemList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column fixed prop="id" align="center" width="50px"/>
                  <el-table-column label="学生ID" prop="studentId" align="center"/>
                  <el-table-column label="优惠券ID" prop="couponsId" align="center"/>
                  <el-table-column label="优惠券编号" prop="couponsNumber" align="center"/>
                  <el-table-column label="获取时间" prop="acquireDate" align="center"/>
                  <el-table-column label="核销时间" prop="updatedAt" align="center"/>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex1"
                        v-model:page-size="pageSize1"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage1"
                        @size-change="sizeChangeHandle1"
                        @current-change="CurrentChangeHandle1"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import axios from 'axios';
import {ElMessage} from "element-plus";
export default{
  name: "BadgeList",
  data() {
    return {
      // 可核销优惠券的数据集合
      couponsList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      // 成就徽章的数据集合
      redeemList:[],
      pageIndex1: 1,
      pageSize1:5,
      totalPage1: 0,
      begin1: 0,
      end1: this.pageSize1 - 1,
      type:1,
      //分页方法
      activeName: "1",// 当前选中的tab
      activeTab: '', // 存储当前激活的标签页的名称
      dynamicTabs: [], // 存储从后端获取的标签页信息
      currentPark: [],
      verifyForm:{
        couponsNumber:null
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if(tab.props.name === "1"){
        this.activeTab = "1";
        this.type=1;
        this.getCouponsList();
      }else if(tab.props.name === "2"){
        this.activeTab = "2";
        this.type=2;
        this.getRedeemList();
      }
    },
    //0.分页方法
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },

    /*可核销优惠券的数据顯示*/
    // 1.改变数组大小
    sizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getCouponsList();
    },
    // 2.改变当前页号
    CurrentChangeHandle(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.dataList = [];
      this.getCouponsList();
    },
    // 3.表格數據顯示
    async getCouponsList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/couponsManage/getStudentCouponsList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.couponsList = res.data.data.list;
          this.totalPage = res.data.data.total;
        } else {
          ElMessage('获取可核销优惠券数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取可核销优惠券数据失败');
      }
    },

    /*成就徽章顯示*/
    // 1.改变数组大小
    sizeChangeHandle1(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize1 = val;
      this.getRedeemList();
    },
    // 2.改变当前页号
    CurrentChangeHandle1(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex1 = val;
      this.redeemList = [];
      this.getRedeemList();
    },
    // 3.表格數據顯示
    async getRedeemList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize1, this.pageIndex1);
        console.log(pageInfo);

        const res = await axios.post('/couponsManage/getRedeemList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.redeemList = res.data.data.list;
          this.totalPage1 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取徽章数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取徽章数据失败');
      }
    },
    resetForm() {
      this.verifyForm.couponsNumber=null;
    },
    /*核销优惠券*/
    async redeemCoupon() {
      try {
        const res = await axios.get('/couponsManage/redeemCoupon/'+this.verifyForm.couponsNumber);

        console.log('获取res数据:',res);
        if (res.data.code === 200) {
          ElMessage({
            message: '核销优惠券成功',
            type: 'success',
          });
          this.getCouponsList();
          this.resetForm();
        }if (res.data.code === 400) {
          this.$message.error(res.data);
          this.getCouponsList();
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },
  },
  // Use the beforeCreate hook to initialize the 'end' property
  beforeCreate() {
    this.end = this.pageSize - 1;
    this.end1 = this.pageSize1 - 1;
  },
  mounted() {
    this.getCouponsList();
  }
}
</script>

<style scoped lang="scss">
@import "@/theme/common.css";
@import "@/theme/commonTable.css";
.coupons__title {
  color: #53646f;
  font-weight: 350;
  font-size: 18px;
  margin: 0;
  text-align: center;
}

.card {
  width: 500px;
  height: 150px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
  margin: 0 auto;
}
.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-content {
  max-width: 100%;
  margin: 0 auto;
}

.input-item, .button-item {
  text-align: center;
}
</style>